<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer="defer"></script>
</head>
<body>
    <script>
        //1. 使用document方法向页面中输出 "一级标题---六级标题" 这样的标签 ( 提示每一行打印 )
        document.write("<h1>一级标题</h1>");
        document.write("<h2>二级标题</h2>");
        document.write("<h3>三级标题</h3>");
        document.write("<h4>四级标题</h4>");
        document.write("<h5>五级标题</h5>");
        document.write("<h6>六级标题</h6>");

        //2. 使用document方法向页面中输出一个一行一列的表格,  ( 提示每一行打印 )
        document.write("<table border='1px solid #cecece'><tr><td>表格</td></tr></table>");

        //3. 页面中窗口有一个输入弹窗, 来计算圆的面积, 再控制台输出 : "圆的面积为***"
        var Pi = 3.14;
        var r = prompt("计算圆的面积\n请输入圆的半径：");
        console.log("圆的面积为："+r*r*Pi);

        //案例1 :使用字符串拼接的形式拼接一个一行一列的表格
        var table1 = "<table border='1px solid #cecece'>";
        var tr1 = "<tr>";
        var td = "<td>表格</td>";
        var tr2 = "</tr>";
        var table2 = "</table>";
        document.write(table1+tr1+td+tr2+table2);

        
        // 命名变量:姓名,身高,体重,年龄,性别并进行赋值
        // 分别在 : 控制台,页面,弹窗中输出语句
        // 语句格式 : "您的姓名是:**;您的性别是:**;您的年龄是:**;年的身高是:**;您的体重是:**"
        var name = "王志文";
        var height = 173;
        var weight = 100;
        var age = 25;
        var sex = "男";
        document.write("您的姓名是："+name+";您的性别是："+sex+";您的年龄是："+age+";您的身高是："+height+";您的体重是："+weight+"KG。");
        console.log("您的姓名是："+name+";您的性别是："+sex+";您的年龄是："+age+";您的身高是："+height+";您的体重是："+weight+"KG。");
        alert("您的姓名是："+name+";您的性别是："+sex+";您的年龄是："+age+";您的身高是："+height+";您的体重是："+weight+"KG。");
    </script>
</body>
</html>